<template>
    <div class="player-bottom">
        <div class="bottom-progress">
            <span ref="eleCurrentTime">{{eleCurrentTime}}</span>
            <div class="progress-bar" @click="progressClick" ref="progressBar">
                <div class="progress-line" :style="{width:`${progressLine}%`}">
                    <div class="progress-dot"></div>
                </div>
            </div>
            <span ref="eleTotalTime">{{eleTotalTime}}</span>
        </div>
        <div class="bottom-controll">
            <div class="mode" @click="mode" ref="mode"></div>
            <div class="prev" @click="prev"></div>
            <div class="play" @click="play" ref="play"></div>
            <div class="next" @click="next"></div>
            <div class="favorite" @click="favorite" :class="{'active':isFavorite(currentSong)}"></div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { formartTime } from '../../tools/tools'
export default {
  name: 'PlayerBottom',
  data () {
    return {
      num: 0,
      // 当前时间
      eleTotalTime: '00:00',
      // 总时间
      eleCurrentTime: '00:00',
      // 进度条百分百
      progressLine: 0
    }
  },
  methods: {
    ...mapActions([
      'setIsPlayer',
      'setModeType',
      'setCurrentIndex',
      'setCurrentTime',
      'setFavoriteSong'
    ]),
    play () {
      this.setIsPlayer(!this.isPlaying)
    },
    mode () {
      this.setModeType()
    },
    prev () {
      this.setCurrentIndex(this.currentIndex - 1)
      this.$bus.$emit('currentTimeFlag')
    },
    next () {
      this.setCurrentIndex(this.currentIndex + 1)
      this.$bus.$emit('currentTimeFlag')
    },
    favorite () {
      this.setFavoriteSong(this.currentSong)
    },
    isFavorite (song) {
      const result = this.favoriteList.find((currentValue) => {
        return currentValue.id === song.id
      })
      return result !== undefined
    },
    progressClick (e) {
      // 拿到进度条距离左边的位置
      const normalLeft = this.$refs.progressBar.offsetLeft
      // 拿到点击的位置距离左边的位置
      const eventLeft = e.pageX
      // 拿到点击的位置在进度条的位置
      const clickLift = eventLeft - normalLeft
      // 拿到进度条的宽度
      const progressWidth = this.$refs.progressBar.offsetWidth
      // 拿到比例
      const value = clickLift / progressWidth
      // 赋值
      this.progressLine = value * 100

      // 从小圆点开始播放
      const currentTime = this.totalTime * value
      this.setCurrentTime(currentTime)
    }

  },
  computed: {
    ...mapGetters([
      'isPlaying',
      'modeType',
      'currentIndex',
      'currentSong',
      'favoriteList'
    ])
  },
  watch: {
    isPlaying (newValue, oldValue) {
      newValue ? this.$refs.play.classList.add('active') : this.$refs.play.classList.remove('active')
    },
    modeType (newValue, oldValue) {
      switch (newValue) {
        case 0:
          this.$refs.mode.classList.remove('random')
          this.$refs.mode.classList.add('loop')
          break
        case 1:
          this.$refs.mode.classList.remove('loop')
          this.$refs.mode.classList.add('one')
          break
        case 2:
          this.$refs.mode.classList.remove('one')
          this.$refs.mode.classList.add('random')
          break
      }
    },
    totalTime (newValue, oldValue) {
      const time = formartTime(newValue)
      this.eleTotalTime = `${time.minute}:${time.second}`
    },
    currentTime (newValue, oldValue) {
      // 格式化时间
      const time = formartTime(newValue)
      this.eleCurrentTime = `${time.minute}:${time.second}`
      // 根据当前时间比例更新进度条
      const value = newValue / this.totalTime * 100
      this.progressLine = value
    }
  },
  props: {
    totalTime: {
      type: Number,
      default: 0,
      required: true
    },
    currentTime: {
      type: Number,
      default: 0,
      required: true
    }
  }
}
</script>

<style scoped lang='scss'>
@import "../../assets/css/variable";
@import "../../assets/css/mixin";
.player-bottom{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    .bottom-progress{
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
          width: 100px;
            @include font_size($font_samll);
            @include font_color()
        }
        .progress-bar{
            margin: 0 10px;
            height: 10px;
            width: 100%;
            background-color: white;
            .progress-line{
                width: 50%;
                height: 100%;
                background-color: #ccc;
                position: relative;
                .progress-dot{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background-color: white;
                    position: absolute;
                    left: 100%;
                    top: -50%;
                }
            }
        }
    }
    .bottom-controll{
        width: 80%;
        margin: 0 auto;
        padding: 50px 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        div{
            width: 84px;
            height: 84px;
        }
        .mode{
            @include bg_img('../../assets/images/loop');
            &.loop{
                @include bg_img('../../assets/images/loop');
            }
            &.one{
                @include bg_img('../../assets/images/one');
            }
            &.random{
                @include bg_img('../../assets/images/shuffle');
            }
        }
        .prev{
            @include bg_img('../../assets/images/prev')
        }
        .play{
            @include bg_img('../../assets/images/play');
            &.active{
                @include bg_img('../../assets/images/pause')
            }
        }
        .next{
            @include bg_img('../../assets/images/next')
        }
        .favorite{
            @include bg_img('../../assets/images/un_favorite');
            &.active{
                @include bg_img('../../assets/images/favorite')
            }
        }
    }
}
</style>
